<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微博详情页面</title>
    <link rel="stylesheet" href="detail.css">
</head>
<body>

<div id="app">
    <header>
        <h1>微博详情页面</h1>
    </header>
    <main>
        <section class="weibo-detail">
            <h2><span class="nickname">{{weibo.nickname}}</span>: {{weibo.content}}</h2>
            <p>发布于: {{weibo.created}}</p>
        </section>
        <section class="comments">
            <h3>评论</h3>
            <div v-for="c in arr">
                <h4>
                    <span class="nickname">{{c.nickname}}评论道:</span> {{c.content}}
                    <span class="comment-date">发布于：{{c.created}}</span>
                </h4>
            </div>
        </section>
        <section class="comment-form">
            <textarea cols="30" rows="3" placeholder="评论内容..." style="white-space: pre-wrap" v-model="comment.content"></textarea>
            <input type="button" value="评论" @click="insert()">
        </section>
    </main>
</div>

<!-- 引入axios和vue的框架文件 -->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    let v = new Vue({
        el: "#app",
        data: {
            weibo: {},
            comment: { content: "", weiboId: "" },
            arr: []
        },
        methods: {
            insert() {
                v.comment.weiboId = v.weibo.id;
                axios.post("/v1/comment/insert", v.comment).then(function (response) {
                    if (response.data === 1) {
                        location.reload();
                    } else {
                        alert("请先登录");
                        location.href = "/login.html";
                    }
                });
            }
        },
        created: function () {
            const searchParams = new URLSearchParams(location.search);
            const id = searchParams.get('id');

            axios.get(`/v1/weibo/selectById?id=${id}`).then(function (response) {
                v.weibo = response.data;
            });

            axios.get(`/v1/comment/selectByWeiboId?id=${id}`).then(function (response) {
                v.arr = response.data;
            });
        }
    });
</script>

</body>
</html>
